/**
 * @description upload video menu
 * @author wangfupeng
 */

import { IButtonMenu, IDomEditor, DomEditor, SlateRange } from '@wangeditor/editor';
import { IUploadConfigForVideo } from './config';
import uploadVideos from '../helper/upload-videos';

class UploadVideoMenu implements IButtonMenu {
	readonly title = '媒体上传';
	readonly iconSvg =
		'<svg t="1723710321406" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7957" width="200" height="200"><path d="M808.192 262.592a320.16 320.16 0 0 0-592.352 0A238.592 238.592 0 0 0 32 496C32 628.352 139.648 736 272 736h91.488a32 32 0 1 0 0-64H272A176.192 176.192 0 0 1 96 496a175.04 175.04 0 0 1 148.48-173.888l19.04-2.976 6.24-18.24C305.248 197.472 402.592 128 512 128a256 256 0 0 1 242.208 172.896l6.272 18.24 19.04 2.976A175.04 175.04 0 0 1 928 496c0 97.024-78.976 176-176 176h-97.28a32 32 0 1 0 0 64h97.28c132.352 0 240-107.648 240-240a238.592 238.592 0 0 0-183.808-233.408z" p-id="7958"></path><path d="M649.792 570.048a32 32 0 1 0 40.544-49.536l-158.048-129.408a32 32 0 0 0-40.576 0l-159.04 130.24a32.032 32.032 0 0 0 20.256 56.768 31.744 31.744 0 0 0 20.256-7.264L480 483.456V912a32 32 0 0 0 64 0V483.456l105.792 86.592z" p-id="7959"></path></svg>';
	readonly tag = 'button';

	getValue(editor: IDomEditor): string | boolean {
		// 无需获取 val
		return '';
	}

	isActive(editor: IDomEditor): boolean {
		// 任何时候，都不用激活 menu
		return false;
	}

	exec(editor: IDomEditor, value: string | boolean) {
		// const { allowedFileTypes = [] } = this.getMenuConfig(editor);
		const allowedFileTypes = ['audio/mp3', 'audio/mpeg', 'video/mp4'];
		// 设置选择文件的类型
		let acceptAttr = '';
		if (allowedFileTypes.length > 0) {
			acceptAttr = `${allowedFileTypes.join(', ')}`;
		}

		// 添加 file input（每次重新创建 input）
		const body = document.body;
		const inputEl = document.createElement('input');
		inputEl.setAttribute('type', 'file');
		inputEl.setAttribute('accept', acceptAttr);
		inputEl.setAttribute('multiple', 'false');
		inputEl.style.visibility = 'hidden';
		body.appendChild(inputEl);
		inputEl.click();
		inputEl.addEventListener('change', async () => {
			const files = inputEl.files;
			await uploadVideos(editor, files);
			body.removeChild(inputEl);
		});
	}

	isDisabled(editor: IDomEditor): boolean {
		const { selection } = editor;
		if (selection == null) return true;
		if (!SlateRange.isCollapsed(selection)) return true; // 选区非折叠，禁用

		const selectedElems = DomEditor.getSelectedElems(editor);
		const hasVoidOrPre = selectedElems.some(elem => {
			const type = DomEditor.getNodeType(elem);
			if (type === 'pre') return true;
			if (type === 'list-item') return true;
			if (editor.isVoid(elem)) return true;
			return false;
		});
		if (hasVoidOrPre) return true; // void 或 pre ，禁用

		return false;
	}

	private getMenuConfig(editor: IDomEditor): IUploadConfigForVideo {
		// 获取配置，见 `./config.js`
		return editor.getMenuConfig('uploadVideo') as IUploadConfigForVideo;
	}
}

export default UploadVideoMenu;
